<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JSX插值表达式</title>
	</head>
	<body>
		<div id="app"></div>
		
		<script src="./js/react17.development.js"></script>
		<script src="./js/react-dom17.development.js"></script>
		<script src="./js/babel.min.js"></script>
		<script type="text/babel">
			// 模拟获取了用户数据
			let user = {
				username: "damu",
				userpass: "123123",
				gender: "男",
				age: 18,
				phone: 15688889999
			}
			
			// 自定义函数
			function showGender(val) {
				return "性别：" + val
			}
			
			// JSX结构化语言，渲染数据
			// 1、输出变量中的数据
			// 2、调用自定义函数
			// 3、调用JS内建函数
			// 4、可以执行简单运算
			let div = 	<div>
							<p>账号: { user.username }</p>
							<p>密码: { user.userpass }</p>
							<p>{ showGender(user.gender) }</p>
							<p>年龄: { user.age.toFixed(2) }</p>
							<p>{'手机: ' + user.phone }</p>
						</div>
			
			// 渲染展示到页面中
			ReactDOM.render(div, document.querySelector("#app"))
		</script>
	</body>
</html>